<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--
            父组件除了可以通过属性给子组件传值，也可以通过标签内容进行传值，
            通过属性传值，子组件使用props接收，通过内容传值，子组件在模板中通过slot接收
        -->
        <com>
            
            <b slot="one">这是组件标签内容{{num}}</b>
            <!--
                组件的数据只能出现在组件本身的模板中
            -->
            <i slot="two">第二条</i>
        </com>
        <hr>

        <scope-slot  >
            <!--
                在组件标签的内容中，可以通过template标签的scope属性，
                获得组件模板中slot的属性
            -->
            <template scope="abc">
                 {{abc.val}}
            </template>
           
        </scope-slot>
    </div>
</body>
<script src="./vue.js"></script>
<script type="text/html" id="com">

    <div>
        <span></span>
        <h1>这是子组件的标题</h1>
        <!--
            slot元素也可以添加内容，当组件使用时添加了组件内容，整个slot就会显示组件内容
            如果组件中没有内容，则会显示slot的内容
        -->
        <slot><p>组件没命名的则会显示slot本身内容，有就会被替换</p></slot>
        <slot name="one"></slot>       
        <p>这是子组件的内容</p>
        <slot name="two"></slot>
    </div>
</script>

<script type="text/html" id="scope-slot">
    <div>
        <!--
            slot标签除了设置name属性之外还可以设置其他属性，在父组件模板中使用这个数组
            时，可以在组件内容中获得这个属性
        -->
        <slot :val="val"></slot>
    </div>
</script>    
<script>

    Vue.component("com",{
        template:"#com",
        data:function(){
            return{
                num:10
            }
        }
    });
    Vue.component("scope-slot",{
        template:"#scope-slot",
        // props:["val"],
        data:function(){
            return{
                val:"hello"
            }
        }
        
    })

    new Vue({
        el:"#app",
        data:{
             num:8
        }
    })






    
</script>
</html>